<script setup lang="ts">
import CollapseContainer from '../common/CollapseContainer.vue'
</script>

<template>
  <div class="role-responsibilities">
    <collapse-container>
      <template #default>
        <div class="current-staff">
          <span class="name">人员名称：陶荣徽</span>
          <span class="job-title"
            >Date of appointment：2025/02/17 15:05:56</span
          >
          <span class="job-title">联系方式：13385980958</span>
          <span class="job-title">职位：技术总监</span>
        </div>
      </template>
      <template #collapse>
        <div class="current-staff">
          <span class="name small">人员名称：陶荣徽</span>
          <span class="job-title small">任职日期：2025/02/17 15:05:56</span>
          <span class="job-title small">联系方式：13385980958</span>
          <span class="job-title small">职位：技术总监</span>
        </div>
        <div class="current-staff">
          <span class="name small">人员名称：陶荣徽</span>
          <span class="job-title small">任职日期：2025/02/17 15:05:56</span>
          <span class="job-title small">联系方式：13385980958</span>
          <span class="job-title small">职位：技术总监</span>
        </div>
        <div class="current-staff">
          <span class="name small">人员名称：陶荣徽</span>
          <span class="job-title small">任职日期：2025/02/17 15:05:56</span>
          <span class="job-title small">联系方式：13385980958</span>
          <span class="job-title small">职位：技术总监</span>
        </div>
        <div class="current-staff">
          <span class="name small">人员名称：陶荣徽</span>
          <span class="job-title small">任职日期：2025/02/17 15:05:56</span>
          <span class="job-title small">联系方式：13385980958</span>
          <span class="job-title small">职位：技术总监</span>
        </div>
      </template>
    </collapse-container>
  </div>
</template>

<style scoped lang="scss">
.role-responsibilities {
  width: 100%;
}

.current-staff {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &:not(:last-child) {
    margin-bottom: 10px;
  }

  .name,
  .job-title {
    display: inline-block;
  }

  .name {
    font-size: 16px;
    font-weight: bold;

    &.small {
      font-size: 14px;
    }
  }

  .job-title {
    margin-right: 10px;
    font-size: rgb(0 0 0 / 40%);

    &.small {
      font-size: 14px;
    }
  }
}
</style>
